<template>
  <div class="yj-head">
    <span class="logo">管理</span>
    <ul class="user-info">
      <!-- <li class="msg" v-if="loadIm" @click="handleClickShowIm">IM</li> -->
      <li class="btn-fullscreen" @click="handleFullScreen">
        <a-tooltip placement="bottom">
          <template #title>
            <span>{{ fullscreen?`取消全屏`:`全屏` }}</span>
          </template>
          <FullscreenOutlined />
        </a-tooltip>
      </li>
      <a-dropdown trigger="click">
        <span class="el-dropdown-link">{{userName}}</span>
        <DownOutlined />
        <template #overlay>
          <a-menu @click="onClick">
            <a-menu-item key="loginout">退出</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { FullscreenOutlined, DownOutlined } from '@ant-design/icons-vue'
import type { MenuProps } from 'ant-design-vue';
import { ref } from 'vue'
const fullscreen = ref(false)
const userName = ref('admin')

function handleFullScreen() {
  const element: any = document.documentElement;
  if (fullscreen.value) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    }
  }
  fullscreen.value = !fullscreen.value;
}
const onClick: MenuProps['onClick'] = ({ key }) => {
  switch (key) {
    case "loginout":
      console.log("退出");
      break;
  }
}
</script>

<style lang="scss" scoped>
.yj-head{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  line-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px  0px 10px 0px #ccc;
  // color: #fff;
  //  background-color: rgb(64, 158, 255);
  // background-color:#1a334c;
  .logo{
    width:150px;
    text-align: center;
    cursor: pointer;
  }
  .user-info {
    padding-right: 50px;
    font-size: 16px;
    // color: #fff;
    li{
        display: inline-block;
        vertical-align: middle;
        margin-right: 20px;
    }
  }
}
</style>
